<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>第十二课 状态模式</title>
</head>

<body>
    <script>

        function Ready(){}
        Ready.prototype.setState = function(){
            this.$button.innerHTML = '准备视频通话';
            this.state = this.calllingState;
            console.log('准备视频通话');
        }

        function Calling(){}
        Calling.prototype.setState = function(){
            this.$button.innerHTML = '正在视频通话';
            this.state = this.endState;
            console.log('正在视频通话');
        }

        function End(){}
        End.prototype.setState = function(){
            this.$button.innerHTML = '视频通话结束';
            this.state = this.readyState;
            console.log('视频通话结束');
        }

        function VideoCallMethod(){
            this.readyState = new Ready();
            this.calllingState = new Calling();
            this.endState = new End();
            this.state = this.readyState;
            this.$button = null;
        }
        VideoCallMethod.prototype.init = function(){
            this.$button = document.createElement('button');
            this.$button.innerHTML = '按钮';
            document.body.appendChild(this.$button);
            this.eventCenter();
        }
        VideoCallMethod.prototype.eventCenter = function(){
            var that = this;
            this.$button.onclick = function(){
                that.state.setState.apply(that);
            }
        }
        var v1 = new VideoCallMethod();
        v1.init();
    </script>
</body>

</html>